<template>
  <MyModal ref="myModal" title="订单详情" :top="35">
    <template #content>
      <div class="row">
        <div class="left">
          <div class="image">
            <img :src="info?.filmImg" style="width: 150px" />
          </div>
          <div class="c-content">
            <div class="left-item marginTop">
              <span class="left-key">订单号:</span>
              <span class="left-value">{{ info?.orderNumber }}</span>
            </div>
            <div class="left-item marginTop">
              <span class="left-key">影院名称:</span>
              <span class="left-value">{{ info?.cinemaName }}</span>
            </div>
            <div class="left-item marginTop">
              <span class="left-key">影院地址:</span>
              <span class="left-value">{{ info?.cinemaAddress }}</span>
            </div>
            <div class="left-item marginTop">
              <span class="left-key">电影名称:</span>
              <span class="left-value">{{ info?.filmName }}</span>
            </div>
            <div class="left-item marginTop">
              <span class="left-key">开场时间:</span>
              <span class="left-value">
                <a>{{ timeFormat(info?.showTime) }}</a>
              </span>
            </div>
            <div class="left-item marginTop">
              <span class="left-key">座位信息:</span>
              <span class="left-value">
                <!-- <a-tag color="blue" v-for="item in info?.seatList" :key="item.id">
                                    {{ item.seatName }}
                                </a-tag> -->

                <a-tag
                  color="blue"
                  v-if="info?.seatNos"
                  v-for="item in info?.seatNos.split(',')"
                  :key="item"
                >
                  {{ item }}
                </a-tag>
              </span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="right-item marginTop">
            <span class="right-key">原价:</span>
            <!-- <span class="right-value">￥{{ (info?.price / 100).toFixed(2) }}</span> -->
            <span class="right-value">￥{{ (info?.submitPrice / 100).toFixed(2) }}</span>
          </div>
          <div class="right-item marginTop">
            <span class="right-key">票数:</span>
            <span class="right-value">{{ info?.seatCount }}</span>
          </div>
          <div class="right-item marginTop">
            <span class="right-key">订单状态:</span>
            <span class="right-value">
              <a-tag v-if="info.orderStatus == 2" color="cyan">已提交</a-tag>
              <a-tag v-if="info.orderStatus == 1" color="blue">已创建</a-tag>
              <a-tag v-if="info.orderStatus == 3" color="blue">出票中</a-tag>
              <a-tag v-if="info.orderStatus == 10" color="green">出票成功</a-tag>
              <a-tag v-if="info.orderStatus == 20" color="red">出票失败</a-tag>
            </span>
          </div>
          <div class="right-item marginTop">
            <span class="right-key">结算状态:</span>
            <span class="right-value">
              <a-tag v-if="info.settleStatus == 1" color="blue">已结算</a-tag>
              <a-tag v-if="info.settleStatus == 0" color="red">未结算</a-tag>
            </span>
          </div>
        </div>
      </div>
      <div class="vote-box" v-if="info?.ticketList">
        <div
          class="vote-item"
          v-for="(row, index) in info?.ticketList"
          @click="shwoImgge(row)"
          :key="index"
          v-if="info?.ticketList.length"
        >
          <img alt="test" :src="row.ticket" style="width: 150px" />
          <div class="content">
            <div>
              <span>取票码:</span>
              <span style="margin-left: 10px; cursor: pointer">
                <a-tag color="blue" v-if="row.ticketCode">{{ row.ticketCode }}</a-tag>
              </span>
            </div>
            <div>
              <span>验证码:</span>
              <span style="margin-left: 10px; cursor: pointer">
                <a-tag color="blue" v-if="row.validateCode">{{ row.validateCode }}</a-tag>
              </span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { timeFormat } from '@/hooks/util'
import * as orderApi from '@/api/order'
const myModal = ref()
const info = ref({})
const id = ref('')

let robotId = ref<string>('')
const showModal = (record: any) => {
  myModal.value?.showModal()
  // id.value = record.id
  id.value = record.orderId
  getOrderDetailInfo()
  console.log(info.value, ' info.value info.value')
}

const getOrderDetailInfo = async () => {
  try {
    const { state, message: msg, data } = await orderApi.getOrderDetail({ id: id.value })
    if (state == 200) {
      console.log(data, 'datadata')

      info.value = data
    }
  } catch (e) {
    message.error('网络请求连接失败~')
  }
  //
}
const shwoImgge = (row: any) => {
  emit('ImagePreview', [row])
}
const emit = defineEmits<{
  refresh: []
  ImagePreview: []
}>()

defineExpose({
  showModal,
})

interface formState {
  code: string
}
const formState = ref<formState>({
  code: '',
})

const handleSubmit = async () => {
  let params = {
    code: formState.value.code,
    robotId: robotId.value,
  }
  try {
    // const { state, message: msg } = await accountApi.openCard(params)
    // if (state === 200) {
    message.success('激活成功')
    myModal.value?.cancelModal()
    emit('refresh')
    // } else {
    //     message.error(msg)
    // }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
</script>
<style lang="less">
.row {
  display: flex;
  justify-content: space-between;
  

  .left {
    display: flex;

    .c-content {
      margin-left: 20px;
      font-size: 12px;

      .left-value {
        margin-left: 6px;
        color: #15181d;
      }

      .left-key {
        color: #858a99;
      }

      .marginTop {
        margin-top: 10px;
      }
    }
  }

  .right {
    font-size: 14px;

    .right-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;

      .right-value {
        margin-left: 6px;
        color: #15181d;
      }

      .right-key {
        color: #858a99;
      }
    }

    .marginTop {
      margin-top: 10px;
    }
  }
}

.vote-box {
  margin-top: 60px;
  display: flex;
  align-items: center;

  .vote-item {
    display: flex;
    flex-direction: column;

    .content {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    // align-items: center;
  }

  .vote-item:nth-child(n + 2) {
    margin-left: 30px;
  }
}
</style>
